<template>
  <div class="home">
    <!-- 顶部搜索 -->
    <van-nav-bar class="p-t-3 p-b-3">
      <template #left>
        <van-icon name="location-o" color="#A8A3A7" size="1.5rem" />
        <p class="p-t-1">地址</p>
      </template>
      <template #title>
        <span>北京石景山区</span>
        <van-icon name="arrow-down m-l-1" color="#A8A3A7" />
      </template>
      <template #right>
        <van-icon name="search" color="#A8A3A7" size="1.5rem" />
        <p class="p-t-1">搜索</p>
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="2000">
      <van-swipe-item v-for="(image, index) in image" :key="index">
        <van-image fit="contain" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <van-grid>
      <van-grid-item>
        <van-icon
          class="icon-class"
          name="label-o"
          size="1.5rem"
          color="#fff"
        />
        <span class="p-t-2">水果特惠</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon
          class="icon-class"
          name="flower-o"
          size="1.5rem"
          color="#fff"
          style="background: #e6c3bd;"
        />
        <span class="p-t-2">每日必抢</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon
          class="icon-class"
          name="smile-o"
          size="1.5rem"
          color="#fff"
          style="background: #eed0b8;"
        />
        <span class="p-t-2">嗨吃福利</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon
          class="icon-class"
          name="good-job-o"
          size="1.5rem"
          color="#fff"
          style="background: #8cb2c5;"
        />
        <span class="p-t-2">鲜蜂力荐</span>
      </van-grid-item>
    </van-grid>

    <!-- 分割标题 品牌特卖-->
    <van-divider
      class="p-t-1"
      :style="{
        padding: '0.5rem 1rem 0',
        background: '#fff',
        margin: '0.3rem 0 0 0',
        color: '#000',
      }"
    >
      品牌特卖
      <van-icon class="p-l-2" name="play-circle-o" />
    </van-divider>
    <!-- 小图 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image :src="require('./assets/special-sale-img3.jpg')" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('./assets/special-sale-img1.jpg')" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('./assets/special-sale-img4.jpg')" />
      </van-grid-item>
    </van-grid>

    <!-- 分割标题 优选水果 -->
    <van-divider
      class="p-t-1"
      :style="{
        padding: '0.5rem 1rem 0',
        background: '#fff',
        margin: '0.3rem 0 0 0',
        color: '#000',
      }"
    >
      优选水果
      <van-icon class="p-l-2" name="play-circle-o" />
    </van-divider>
    <!-- 大图 -->
    <van-grid :border="false" :column-num="1">
      <van-grid-item>
        <van-image
          width="100%"
          height="100%"
          fit="contain"
          radius="50px"
          :src="require('./assets/optimization-img1.jpg')"
        />
      </van-grid-item>
    </van-grid>
    <!-- 小图 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img7.png')" />
        <span class="special-sale-tbox">新鲜青柠500g/盒</span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img4.png')" />
        <span class="special-sale-tbox">新鲜橙子500g/盒</span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img2.png')" />
        <span class="special-sale-tbox">新鲜猕猴桃500g/盒</span>
      </van-grid-item>
    </van-grid>
    <!-- 广告语 -->
    <van-row gutter="10" class="m-l-2 b-white">
      <van-col class="special-sale-text1" span="4">买一赠一</van-col>
    </van-row>
    <!-- 价格 -->
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
    </van-grid> 

    <!-- 分割标题 酒水饮料 -->
    <van-divider
      class="p-t-1"
      :style="{
        padding: '0.5rem 1rem 0',
        background: '#fff',
        margin: '0.3rem 0 0 0',
        color: '#000',
      }"
    >
      酒水饮料
      <van-icon class="p-l-2" name="play-circle-o" />
    </van-divider>
    <!-- 大图 -->
    <van-grid :border="false" :column-num="1">
      <van-grid-item>
        <van-image
          width="100%"
          height="100%"
          fit="contain"
          radius="50px"
          :src="require('./assets/optimization-img2.jpg')"
        />
      </van-grid-item>
    </van-grid>
    <!-- 小图 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img8.png')" />
        <span class="special-sale-tbox">可口可乐500g/瓶</span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img10.png')" />
        <span class="special-sale-tbox">RIO鸡尾酒500g/瓶水蜜桃味</span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="70%" :src="require('./assets/fruits-img9.png')" />
        <span class="special-sale-tbox">百威啤酒400ml/瓶</span>
      </van-grid-item>
    </van-grid>
    <!-- 广告语 -->
    <van-row gutter="10" class="m-l-2 b-white">
      <van-col class="special-sale-text1" span="4">买一赠一</van-col>
    </van-row>
    <!-- 价格 -->
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
      <van-grid-item class="special-sale-text2">
        <template #text>
          ￥10.8
          <span>￥12.8</span>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['image']),
  },
}
</script>

<style lang="scss">
.home {
  margin-bottom: 50px;
}
.van-nav-bar__left,
.van-nav-bar__right {
  flex-direction: column !important;
}
.icon-class {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #9bcbb5;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
</style>
